import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export default function CreateScreen() {
  const insets = useSafeAreaInsets();

  const createOptions = [
    {
      id: 1,
      title: '快速拼图',
      subtitle: '智能布局，一键生成',
      icon: 'grid-outline',
      color: '#FF6B9D',
      bgColor: '#FFF0F5',
    },
    {
      id: 2,
      title: '自由拼图',
      subtitle: '自由创作，随心所欲',
      icon: 'layers-outline',
      color: '#4A90E2',
      bgColor: '#F0F8FF',
    },
    {
      id: 3,
      title: '主题模板',
      subtitle: '精美模板，快速应用',
      icon: 'bookmark-outline',
      color: '#F5A623',
      bgColor: '#FFFAF0',
    },
    {
      id: 4,
      title: '照片编辑',
      subtitle: '专业编辑，美化照片',
      icon: 'brush-outline',
      color: '#FF8A65',
      bgColor: '#FFF5F0',
    },
    {
      id: 5,
      title: '视频拼接',
      subtitle: '视频剪辑，创意无限',
      icon: 'videocam-outline',
      color: '#9C27B0',
      bgColor: '#F8F0FF',
    },
    {
      id: 6,
      title: 'AI 生成',
      subtitle: '人工智能，创意助手',
      icon: 'sparkles-outline',
      color: '#00BCD4',
      bgColor: '#F0FFFF',
    },
  ];

  const handleOptionPress = (option: any) => {
    console.log('选择了:', option.title);
    // 这里可以添加导航逻辑
  };

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <View style={styles.header}>
        <Text style={styles.title}>创作中心</Text>
        <Text style={styles.subtitle}>选择你想要的创作方式</Text>
      </View>

      <ScrollView 
        style={styles.content}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.scrollContent}
      >
        <View style={styles.optionsGrid}>
          {createOptions.map((option) => (
            <TouchableOpacity
              key={option.id}
              style={[styles.optionCard, { backgroundColor: option.bgColor }]}
              onPress={() => handleOptionPress(option)}
              activeOpacity={0.8}
            >
              <View style={[styles.iconContainer, { backgroundColor: option.color }]}>
                <Ionicons name={option.icon as any} size={32} color="white" />
              </View>
              <Text style={styles.optionTitle}>{option.title}</Text>
              <Text style={styles.optionSubtitle}>{option.subtitle}</Text>
            </TouchableOpacity>
          ))}
        </View>

        {/* 快捷操作区 */}
        <View style={styles.quickActions}>
          <Text style={styles.sectionTitle}>快捷操作</Text>
          <View style={styles.quickActionRow}>
            <TouchableOpacity style={styles.quickActionButton}>
              <Ionicons name="camera-outline" size={24} color="#666" />
              <Text style={styles.quickActionText}>拍照</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.quickActionButton}>
              <Ionicons name="images-outline" size={24} color="#666" />
              <Text style={styles.quickActionText}>相册</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.quickActionButton}>
              <Ionicons name="scan-outline" size={24} color="#666" />
              <Text style={styles.quickActionText}>扫描</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.quickActionButton}>
              <Ionicons name="cloud-download-outline" size={24} color="#666" />
              <Text style={styles.quickActionText}>导入</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8F9FA',
  },
  header: {
    paddingHorizontal: 20,
    paddingVertical: 20,
    backgroundColor: 'white',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
  content: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 100,
  },
  optionsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: 20,
    paddingTop: 20,
    justifyContent: 'space-between',
  },
  optionCard: {
    width: '48%',
    padding: 20,
    borderRadius: 16,
    marginBottom: 16,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  iconContainer: {
    width: 64,
    height: 64,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 12,
  },
  optionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 4,
    textAlign: 'center',
  },
  optionSubtitle: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    lineHeight: 16,
  },
  quickActions: {
    marginTop: 20,
    paddingHorizontal: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
    marginBottom: 16,
  },
  quickActionRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'white',
    borderRadius: 16,
    paddingVertical: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  quickActionButton: {
    alignItems: 'center',
    flex: 1,
  },
  quickActionText: {
    fontSize: 12,
    color: '#666',
    marginTop: 8,
  },
});
